<template>
  <div class="order-list">
    <div v-for="(order,index) in orderList" :key="order.id">
      <van-card
          :num = "order.num+'天'"
          :price = "order.price"
          :desc="order.bookTitle"
          :title="'订单编号:'+order.id"
          :thumb="order.defaultImg"
      />
      <van-steps :active="order.type">
        <van-step>买家下单</van-step>
        <van-step>支付完成</van-step>
        <van-step>等待收货</van-step>
        <van-step>借阅中</van-step>
        <van-step>交易完成</van-step>
      </van-steps>
      <van-cell class="ope">
        <div class="order-cancle">
          <van-button v-if="order.type < 2" @click="cancleOrder(order,index)">取消订单</van-button>
          <van-button class="order-pay" v-if="order.type == 1" @click="updateType(order,index)" >已发货</van-button>
          <van-button class="order-pay" v-if="order.type == 4" @click="updateType(order,index)" >确认收货</van-button>
        </div>
      </van-cell>
    </div>
  </div>
</template>

<script>
import {Step,Steps,Card,Dialog} from "vant"
import {ApiService} from "@/axios/apiService";
import Vue from "vue"
Vue.use(Step);
Vue.use(Steps);
Vue.use(Card)
Vue.use(Dialog)
export default {
  data() {
    return {
      active: 1,
      orderList: [],
    }
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      const api = new ApiService("/saleout/list")
      api.getParams({
        userId : api.getCookie("userId")
      }).then(res=> {
        console.log(res);
        this.orderList = res.data.data;
      })
    },
    //更新订单状态
    updateType(order,index) {
      const api = new ApiService("/sale/updateSaleDocType")
      api.getParams({
        id: order.id,
        type: order.type,
      }).then(res=> {
        if(res.data.code ==200 ) {
          Dialog.alert({
            title:"系统提示",
            message:"成功",
          })
          order.type++;
          this.orderList[index] = order;
        }
      })
    },
    //取消订单
    cancleOrder(order,index) {
      const api = new ApiService("/sale/cancleSaleDoc")
      api.getParams({
        id:order.id,
      }).then(res=> {
        console.log(res)
        if(res.data.code == 200) {
          this.orderList.splice(index,1);
        }
      })
      },
  }
}
</script>
<style scoped>
.opt{
  float: right;
}
.order-cancle {
  margin-left: 40vw;
  float: right;
}

</style>
